<template>
  <section class="bgt-container">
    <div class="bgt-title">
      今日发布
      <el-select v-model="todayEnv" placeholder="请选择" style="float: right;">
        <el-option
          v-for="item in todayEnvList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <hr>
    <template v-if="!publishList || publishList.length===0">
      <el-empty description="今日无部署" />
    </template>
    <template v-else>
      <div class="bgt-list">
        <el-card
          v-for="publishRecord in publishList"
          :key="publishRecord.id"
          class="box-card cart-item-card"
        >

          <!-- 服务-发布时间 -->
          <div class="bgt-title-container">
            <div class="bgt-item-name">
              <el-button size="mini" type="text" style="font-size: 20px;padding: 0px;">
                <router-link :to="'/publish/apply?publishId='+ publishRecord.id">
                  {{ publishRecord.title }}
                </router-link>
              </el-button>
            </div>
            <div class="bgt-item-start-time">
              {{ publishRecord.publishTime }}
            </div>
          </div>

          <!-- 详情 -->
          <div class="bgt-detail-container">
            <!-- 服务 -->
            <div class="bgt-server" style="margin-top: 5px">
              <el-table ref="projectListTable" :data="publishRecord.publishProjects" empty-text="今日无部署" border style="width: 100%;">
                <el-table-column prop="name" label="项目">
                  <template slot-scope="scope">
                    {{ projectMap[scope.row.projectId] }}
                  </template>
                </el-table-column>
                <el-table-column prop="version" label="版本号" width="80" />
                <el-table-column prop="gray" label="发布方式" width="80">
                  <template slot-scope="scope">
                    {{ dict.label.gray_type[scope.row.gray] }}
                  </template>
                </el-table-column>
                <el-table-column prop="resourceId" label="规格" width="80">
                  <template slot-scope="scope">
                    {{ resourceMap[scope.row.resourceId] }}
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 发布用户 -->
            <div class="bgt-server">
              <el-descriptions class="margin-top" :column="3" size="mini" border>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone" />
                    部署
                  </template>
                  {{ queryUserNameByUserId(publishRecord.deployerId) }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-location-outline" />
                    开发
                  </template>
                  {{ queryUserNameByUserId(publishRecord.applierId) }}
                </el-descriptions-item>
                <el-descriptions-item v-if="publishRecord.hasTester===1">
                  <template slot="label">
                    <i class="el-icon-office-building" />
                    测试
                  </template>
                  {{ queryUserNameByUserId(publishRecord.testerId) }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>

          <!-- 操作区域 -->
          <div class="bgt-operation-container">
            <el-button size="mini" icon="el-icon-view" type="text">
              <router-link :to="'/publish/apply?publishId='+ publishRecord.id">
                详情
              </router-link>
            </el-button>
            <el-button v-if="publishRecord.conflictPublishSheetFlowList.length > 0" size="mini" icon="el-icon-warning" type="text" @click="showConflictFlowList(publishRecord.conflictPublishSheetFlowList)">
              查看冲突
            </el-button>
            <el-button v-if="user.id===publishRecord.processerId" type="text" icon="el-icon-video-play" size="mini" round style="color: red;" @click="deploy(publishRecord.id)">
              快速部署
            </el-button>
          </div>

        </el-card>
      </div>
    </template>

    <!-- 对话框 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="conflictFlowListDialogVisible" title="冲突的发布流程" width="800px">
      <el-table ref="conflictFlowListTable" border :data="conflictFlowList" style="width: 100%;">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table ref="itemTable" :data="props.row.publishProjects" size="small" style="padding-left: 5px;padding-right: 15px;">
              <el-table-column prop="name" label="项目">
                <template slot-scope="scope">
                  {{ projectMap[scope.row.projectId] }}
                </template>
              </el-table-column>
              <el-table-column prop="version" label="版本号" width="80" />
              <el-table-column prop="gray" label="发布方式" width="80">
                <template slot-scope="scope">
                  {{ dict.label.gray_type[scope.row.gray] }}
                </template>
              </el-table-column>
              <el-table-column prop="resourceId" label="规格" width="80">
                <template slot-scope="scope">
                  {{ resourceMap[scope.row.resourceId] }}
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="名称" />
        <el-table-column prop="publishTime" label="发布时间" width="150" />
        <el-table-column prop="applierId" label="申请人" width="80">
          <template slot-scope="scope">
            {{ queryUserNameByUserId(scope.row.applierId) }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatDateStr } from '@/utils/common'
import global_const from '@/mixins/global_const'
import * as APIS from '@/api/server/index'
import crudPublishSheetFlow from '@/api/deploy/publishSheetFlow'
import { Notification } from 'element-ui'

export default {
  name: 'BudgetTodayList',
  components: {},
  mixins: [global_const],
  dicts: ['publish_status', 'gray_type'],
  data() {
    return {
      todayEnv: 'prod',
      quickDeployLoading: false,
      todayEnvList: [{
        value: 'rc',
        label: '预发环境'
      }, {
        value: 'prod',
        label: '生产环境'
      }],
      todayPublishList: {},

      // 冲突流程列表
      conflictFlowList: [],
      conflictFlowListDialogVisible: false
    }
  },
  computed: {
    ...mapGetters([
      'userList',
      'projectMap',
      'resourceList',
      'resourceMap',
      'user'
    ]),
    publishList() {
      return this.todayPublishList[this.todayEnv]
    }
  },
  mounted() {
    this.queryTodayPublishList()
    this.$bus.$on('global-change-store')
  },
  beforeDestroy() {
    this.$bus.$off('global-change-store')
  },
  methods: {
    queryUserNameByUserId(userId) {
      const userListFilter = this.userList.filter(user => user.id === userId)
      if (userListFilter.length > 0) {
        return userListFilter[0].nickName
      }
      return userId
    },
    queryTodayPublishList() {
      APIS.getPublishList().then(data => {
        this.todayPublishList = data
      }).catch(err => {
        console.log(err)
      })
    },
    getTodayRange() {
      const start = new Date(new Date(new Date().toLocaleDateString()).getTime())
      const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)

      const startStr = formatDateStr(start)
      const endStr = formatDateStr(end)
      return [startStr, endStr]
    },
    // 改变状态
    changeStatus(data, val) {
      const message = `${this.dict.label.publish_status[val]}与${data.svrName}的发布?`
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // eslint-disable-next-line no-undef
        this.$alert(message + '成功', '发布操作成功提示', {
          confirmButtonText: '确定'
        })
      }).catch(() => {
        data.status = this.PUBLISH_STATUS_WAITING
      })
    },

    deploy(flowId) {
      this.quickDeployLoading = true
      crudPublishSheetFlow.deployFlow(flowId).then(() => {
        Notification.success({ title: '部署成功', duration: 1000 })
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.quickDeployLoading = false
      })
    },
    showConflictFlowList(conflictPublishSheetFlowList) {
      this.conflictFlowListDialogVisible = true
      this.conflictFlowList = conflictPublishSheetFlowList
    }
  }
}
</script>

<style lang="scss" scoped>

.bgt-container {
  height: calc(100vh - 98px);
  overflow: auto;
}

::v-deep .el-input--small .el-input__inner {
  height: 25px;
}
.bgt-title {
  font-size: 20px;
  line-height: 25px;
  height: 25px;
}

.bgt-list {

  .bgt-title-container {
    height: 30px;
    font-size: 20px;

    // 服务姓名
    .bgt-item-name {
      width: 50%;
      float: left;
      font-weight: 700;
      padding:6px;
      text-align: left;
    }

    // 发布日期
    .bgt-item-start-time {
      width: 50%;
      float: left;
      color: red;
      padding:6px;
      text-align: right;
    }
  }

  .bgt-detail-container {
    font-size: 18px;

    // 服务
    .bgt-server {
      color: gray;
      padding:6px;
    }
  }

  .bgt-operation-container {
    padding: 6px;

    .el-button--text {
      font-size: 17px;
    }
  }
}
</style>
